<template>
  <div class="container">
    <div class="log">
      <div class="left">
        <img src="../../img/1.png" alt />
      </div>
      <div class="right">
        <div class="right1">
          <p class="wen">系统登录</p>
          <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            status-icon
            class="demo-ruleForm"
            style="margin-left: 36px;"
          >
            <el-form-item label="账户:" prop="pass">
              <el-input
                v-model="ruleForm.username"
                type="用户名"
                autocomplete="off"
                style="padding-right: 20px;"
              />
            </el-form-item>
            <el-form-item label="密码:" prop="checkPass">
              <el-input
                v-model="ruleForm.password"
                type="密码"
                autocomplete="off"
                style="padding-right: 20px;"
              />
            </el-form-item>
          </el-form>
          <Button @click="submitForm(ruleForm)" class="deng">登录</Button>
          <Button class="zhu" @click="zhu()">注册</Button>
         
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {useRoute} from 'vue-router'
import { defineComponent, ref, reactive,onMounted } from 'vue'
import { getLogin, getSou } from '../../api'
export default defineComponent({
  setup() {
    const route=useRoute()
    const ruleFormRef = ref()
    const ruleForm = reactive({
      username: '',
      password: '',

    })
    
    const submitForm = (ruleForm: any) => {
      if (ruleForm.username === '' || ruleForm.password === "") {
        alert('不能为空')
      } else {
        // 登录
        getLogin(ruleForm).then((res: any) => {
          console.log(res);
          
          const token = res.data.token
          // 判断是否为可用
          getSou({ token }).then(res1 => {
            // code等于200为可用
            if (res1.data.code === 200) {
              // 保存token跳转
              // id
                localStorage.setItem('token', res.data.token)
                // 管理员或这用户
                localStorage.setItem('token1', res.data.token1)
                if (localStorage.getItem('token')) {
                  window.location.href = "/"
                }
            }else{
              // 不可用弹出已锁定
              alert('已锁定')
            }
          })
        })
      }

    }
  
    const zhu = () => {
      window.location.href = "/zhu"
    }
    return {
      ruleFormRef,
      ruleForm,
      submitForm,
      zhu,
      
    }
  }
})
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  height: 100%;
  background: #ccc;
}
.log {
  width: 80%;
  height: 80%;
  background: #fff;
  position: fixed;
  left: 10%;
  top: 10%;
  display: flex;
}
.right {
  width: 50%;
  height: 100%;
  background: #eee;
}
.right1 {
  margin-top: 50%;
  .wen {
    padding-left: 40px;
    font-size: 24px;
    padding-bottom: 10px;
  }
}
.deng {
  margin-left: 36px;
  width: 540px;
  height: 30px;
  margin-top: 20px;
  background-color: #0188fb;
  border: none;
}
.zhu {
  margin-left: 36px;
  margin-top: 20px;
}
</style>
